<template>
  <div>
    <div class="contorller-wrap">
      <a-form layout="inline">
        <a-form-item label="数据中心">
          <a-select v-model="datacenterId" style="min-width: 200px;" :getPopupContainer="
              (triggerNode) => {
                return triggerNode.parentNode || document.body;
              }
            " @change="(v) => loadResourceList(v)">
            <a-select-option v-for="item in datacenterList" :key="'datacenter_' + item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>

    <div class="overview-content">
      <img class="overview-bg" src="@assets/overview_background.png" />

      <div class="content-box">
        <div class="content-wrapper">
          <div class="content">
            <img src="@assets/node.svg" />

            <div class="col-content">
              <span>服务器</span>
              <span>{{resourceData.nodeCount || 0}}<span class="unit">台</span></span>
            </div>
          </div>
          <div class="controller-box"><a @click="jumpToTabByKey('1')"><img src="@assets/arrow.png" /></a></div>
        </div>

        <div class="content-wrapper">
          <div class="content">
            <img src="@assets/vm.svg" />

            <div class="col-content">
              <span>虚拟机</span>
              <span>{{resourceData.vmCount || 0}}<span class="unit">台</span></span>
            </div>
          </div>
          <div class="controller-box"><a @click="jumpToTabByKey('2')"><img src="@assets/arrow.png" /></a></div>
        </div>

        <div class="content-wrapper">
          <div class="content">
            <img src="@assets/k8s.svg" />

            <div class="col-content">
              <span>容器集群</span>
              <span>{{resourceData.k8sCount || 0}}<span class="unit">个</span></span>
            </div>
          </div>
          <div class="controller-box"><a @click="jumpToTabByKey('3')"><img src="@assets/arrow.png" /></a></div>
        </div>

        <div class="content-wrapper">
          <div class="content">
            <img src="@assets/app.svg" />

            <div class="col-content">
              <span>应用</span>
              <span>{{resourceData.appCount || 0}}<span class="unit">个</span></span>
            </div>
          </div>
          <div class="controller-box"><a @click="jumpToTabByKey('4')"><img src="@assets/arrow.png" /></a></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    gPostAction
  } from "@/api/manage";

  export default {
    name: 'Overview',
    data() {
      return {
        datacenterId: '',
        datacenterList: [{
          id: '',
          name: '全部'
        }],
        resourceData: {}
      }
    },
    mounted() {
      this.loadDatacenterList()
    },
    methods: {
      loadDatacenterList() {
        this.datacenterList = [{
          id: '',
          name: '全部'
        }]

        gPostAction("/asset/pageDatacenter", {
          pageSize: 99
        }).then((res) => {
          this.datacenterList.push(...res.data.list)
          const item = this.datacenterList[0]
          this.datacenterId = item.id
          this.loadResourceList(item.id)
        })
      },
      loadResourceList(id) {
        this.resourceData = {}
        const postData = {
          datacenterId: id,
        }

        gPostAction("/compute/overview", postData).then((res) => {
          if (res.success) {
            this.resourceData = res.data
          }
        })
      },
      jumpToTabByKey(k) {
        this.$emit('changeActiveKey', k)
      },
    }
  }
</script>

<style lang="less" scoped>
  .contorller-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .ant-form-item {
      margin-right: 0;
    }
  }

  .overview-content {
    display: flex;
    align-items: center;
    padding: 30px 35px;
    width: 100%;

    .overview-bg {
      width: 42%;
    }

    .content-box {
      width: 57%;

      .content-wrapper {
        display: inline-block;
        align-items: center;
        margin: 0 6% 6% 0;
        width: 42%;
        border: 1px solid #e2e2e2;
        box-shadow: 0 1px 8px 0 #eef2f5;

        .content {
          display: flex;
          align-items: center;
          height: 120px;

          img {
            margin: 0 8% 0 16%;
            width: 62px;
            height: 62px;
          }

          .col-content {
            display: inline-block;

            & span:not(.unit) {
              display: block;
              color: #4d5354;

              &:first-child {
                font-size: 20px
              }

              &:last-child {
                color: #fc7d2b;
                font-size: 26px
              }
            }

            .unit {
              color: #4d5354;
              font-size: 16px
            }
          }
        }

        .controller-box {
          padding: 3px 10px 3px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          border-top: 1px solid #e2e2e2;

          img {
            width: 20px;
            height: 21px;
          }
        }
      }
    }
  }
</style>